<template>
    <div>

        <el-row style="margin-top: 20px;" :gutter="40">
            <el-col :span="12">
                <div class="grid-content bg-purple">
                    <div class="table-header" style="padding: 0 15px;">能源总览
                        <el-dropdown trigger="click" style="float: right;" @command="handleCommand">
                          <span class="el-dropdown-link" style="background-color: #ccc;padding: 5px;">
                            {{downTxt}}<i class="el-icon-arrow-down el-icon--right"></i>
                          </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="日">日</el-dropdown-item>
                                <el-dropdown-item command="月">月</el-dropdown-item>
                                <el-dropdown-item command="年">年</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div class="table-content">
                        <el-table :data="tableData" stripe style="width: 100%">
                            <el-table-column label="图标">
                                <template slot-scope="scope">
                                    <img :src="scope.row.icon" alt="" style="width: 13px;height: 13px">
                                </template>
                            </el-table-column>
                            <el-table-column prop="type" label="类型"></el-table-column>
                            <el-table-column prop="eng" label="能耗量"></el-table-column>
                            <el-table-column prop="lev" label="标煤量(kg)"></el-table-column>
                        </el-table>
                    </div>

                </div>
            </el-col>
            <el-col :span="12">
                <div class="grid-content bg-purple-light">
                    <div class="grid-content bg-purple">
                        <div class="table-header" style="padding: 0 15px;">建筑能耗排名
                            <el-dropdown trigger="click" style="float: right;margin-left: 15px;" @command="handleCommandBuild">
                              <span class="el-dropdown-link" style="background-color: #ccc;padding: 5px;">
                                {{buildDownTxt}}<i class="el-icon-arrow-down el-icon--right"></i>
                              </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item command="电">电</el-dropdown-item>
                                    <el-dropdown-item command="气">气</el-dropdown-item>
                                    <el-dropdown-item command="水">水</el-dropdown-item>
                                    <el-dropdown-item command="集中供热量">集中供热量</el-dropdown-item>
                                    <el-dropdown-item command="集中供冷量">集中供冷量</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                            <el-dropdown trigger="click" style="float: right;" @command="handleCommand">
                              <span class="el-dropdown-link" style="background-color: #ccc;padding: 5px;">
                                {{downTxt}}<i class="el-icon-arrow-down el-icon--right"></i>
                              </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item command="日">日</el-dropdown-item>
                                    <el-dropdown-item command="月">月</el-dropdown-item>
                                    <el-dropdown-item command="年">年</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>

                        </div>
                        <div class="table-content">
                            <el-table :data="tableData" stripe style="width: 100%">
                                <el-table-column label="图标">
                                    <template slot-scope="scope">
                                        <img :src="scope.row.icon" alt="" style="width: 13px;height: 13px">
                                    </template>
                                </el-table-column>
                                <el-table-column prop="type" label="类型"></el-table-column>
                                <el-table-column prop="eng" label="能耗量"></el-table-column>
                                <el-table-column prop="lev" label="标煤量(kg)"></el-table-column>
                            </el-table>
                        </div>

                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row style="margin-top: 20px;" :gutter="40">
            <el-col :span="12">
                <div class="grid-content bg-purple">
                    <div class="table-header" style="padding: 0 15px;">建筑报警通知
                        <el-dropdown trigger="click" style="float: right;" @command="handleCommand">
                          <span class="el-dropdown-link" style="background-color: #ccc;padding: 5px;">
                            {{downTxt}}<i class="el-icon-arrow-down el-icon--right"></i>
                          </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="日">日</el-dropdown-item>
                                <el-dropdown-item command="月">月</el-dropdown-item>
                                <el-dropdown-item command="年">年</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div class="table-content">
                        <el-table :data="tableData" stripe style="width: 100%">
                            <el-table-column label="图标">
                                <template slot-scope="scope">
                                    <img :src="scope.row.icon" alt="" style="width: 13px;height: 13px">
                                </template>
                            </el-table-column>
                            <el-table-column prop="type" label="类型"></el-table-column>
                            <el-table-column prop="eng" label="能耗量"></el-table-column>
                            <el-table-column prop="lev" label="标煤量(kg)"></el-table-column>
                        </el-table>
                    </div>

                </div>
            </el-col>
            <el-col :span="12">
                <div class="grid-content bg-purple-light">
                    <div class="grid-content bg-purple">
                        <div class="table-header" style="padding: 0 15px;">设备报警通知
                            <el-dropdown trigger="click" style="float: right;margin-left: 15px;" @command="handleCommandBuild">
                              <span class="el-dropdown-link" style="background-color: #ccc;padding: 5px;">
                                {{buildDownTxt}}<i class="el-icon-arrow-down el-icon--right"></i>
                              </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item command="电">电</el-dropdown-item>
                                    <el-dropdown-item command="气">气</el-dropdown-item>
                                    <el-dropdown-item command="水">水</el-dropdown-item>
                                    <el-dropdown-item command="集中供热量">集中供热量</el-dropdown-item>
                                    <el-dropdown-item command="集中供冷量">集中供冷量</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                            <el-dropdown trigger="click" style="float: right;" @command="handleCommand">
                              <span class="el-dropdown-link" style="background-color: #ccc;padding: 5px;">
                                {{downTxt}}<i class="el-icon-arrow-down el-icon--right"></i>
                              </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item command="日">日</el-dropdown-item>
                                    <el-dropdown-item command="月">月</el-dropdown-item>
                                    <el-dropdown-item command="年">年</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>

                        </div>
                        <div class="table-content">
                            <el-table :data="tableData" stripe style="width: 100%">
                                <el-table-column label="图标">
                                    <template slot-scope="scope">
                                        <img :src="scope.row.icon" alt="" style="width: 13px;height: 13px">
                                    </template>
                                </el-table-column>
                                <el-table-column prop="type" label="类型"></el-table-column>
                                <el-table-column prop="eng" label="能耗量"></el-table-column>
                                <el-table-column prop="lev" label="标煤量(kg)"></el-table-column>
                            </el-table>
                        </div>

                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "perspectiveMapChild",
        data(){
            return {
                tableData: [{
                    icon: require('../../../assets/img/EIcons/electricity.png'),
                    type: '电',
                    eng: '0 kw.h',
                    lev:'0'
                }, {
                    icon: require('../../../assets/img/EIcons/gas2.png'),
                    type: '气',
                    eng: '0 m³',
                    lev:'0'
                }, {
                    icon: require('../../../assets/img/EIcons/water.png'),
                    type: '水',
                    eng: '0 t',
                    lev:'0'
                }, {
                    icon: require('../../../assets/img/EIcons/heating_room.png'),
                    type: '暖气',
                    eng: '0 m³',
                    lev:'0'
                },{
                    icon: require('../../../assets/img/EIcons/snow_storm.png'),
                    type: '冷气',
                    eng: '0 m³',
                    lev:'0'
                }],
                downTxt:'日',
                buildDownTxt:'电'
            }
        },
        methods:{
            handleCommand(command){
                this.downTxt = command;
            },
            handleCommandBuild(command){
                this.buildDownTxt = command;
            }
        }
    }
</script>

<style scoped>
    .table-header{
        background-color: #4b8df8;
        color: #fff;
        height: 40px;
        line-height: 40px;
    }
    .table-content{
        border: 1px solid #4b8df8;
        border-top: 0;
        background-color: #fff;
        padding: 0 15px;
    }
</style>